<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>活动人数统计</title>

    <%include ../../common.ejs%>


    <style>
    </style>

</head>
<body background="images/whiteBg.png" >
<div id="top">
<% include ../top.ejs%>
</div>
<div class="container-fluid" style="margin-top: 20px;">
    <div class="row">
        <div class="col-md-1">
        </div>
        <div id="left" class="col-md-2">
             <% include ../left.ejs%>
        </div>
        <div class="col-md-8 bodyDiv" id="right">

                <div class="row">
                    <div class="col-md-2" style="padding-top: 30px;">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12"
                         style="height:311px; width: 853px;margin-top: 30px;margin-left: 5px; width: 100%;">
                        <div class="col-md-6">
                            <div id="main" style="height:300px">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div id="second" style="height:300px">
                            </div>

                        </div>

                    </div>

                </div>
                <!--内容-->
            </div>
            <div class="col-md-1">
            </div>
        </div>
    </div>
</div>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
    // 路径配置
    require.config({
        paths: {
            echarts: 'http://echarts.baidu.com/build/dist'
        }
    });

    // 使用
    require(
            [
                'echarts',
                'echarts/chart/pie',// 使用柱状图就加载bar模块，按需加载
                'echarts/chart/funnel',
                'echarts/chart/line',
                'echarts/chart/bar',

            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main'));
                var myChart2 = ec.init(document.getElementById('second'));
                option = {
                    title: {
                        text: '活动男女分布',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        data: ['男', '女']
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            magicType: {
                                show: true,
                                type: ['pie'],
                                option: {
                                    funnel: {
                                        x: '25%',
                                        width: '50%',
                                        funnelAlign: 'left',
                                        max: 1548
                                    }
                                }
                            },
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    calculable: true,
                    series: [
                        {
                            name: '人员成分',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '50%'],
                            data: [
                                {value: 310, name: '男'},
                                {value: 234, name: '女'},
                            ]
                        }
                    ]
                };
                option2 = {
                    title : {
                        text: '活动人数统计',
                        subtext: '数据'
                    },
                    tooltip : {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['人数']
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            mark : {show: false},
                            dataView : {show: false, readOnly: false},
                            magicType : {show: false, type: ['line', 'bar']},
                            restore : {show: false},
                            saveAsImage : {show: false}
                        }
                    },
                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            data : ['总人数','邀请','报名','出席','未出席']
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:'NUMBER',
                            type:'bar',
                            data:[<%=actives.regisNum+actives.inviteNum%>, <%=actives.inviteNum%>,<%=actives.regisNum%>, <%=actives.attendNum%>, <%=actives.regisNum+actives.inviteNum-actives.attendNum%>],

                        },

                    ]
                };


                // 为echarts对象加载数据
                myChart.setOption(option2);
                myChart2.setOption(option);
            }
    );
</script>

</body>

</html>